lab components / Feedback

Learn info box

Allow users to understand page content and expectations through introductory guidance, improving their experience

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

Examples

Default

Composition:

Title: A brief, descriptive heading summarizing the topic.
Illustration: A visual element to enhance recognition and engagement.
Body: Detailed information, presented in a structured way using headings, bullet points, tabs for organization.
Call to Action (optional): Buttons or links encouraging further exploration.

Default (Collapsed)

Purpose: Provide a concise summary or preview of the page's content.
Best Practices:
- Limit the summary to 1-2 sentences.
- Include a clear call to action (e.g., "Learn More") to expand for details.
- Use an illustration as a visual cue to help users quickly recognize the content's purpose.

Lorem ipsum

Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan.

Etiam finibus

In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et expedita distinctio.

CodeHTML output

Theme: agentic-ai-2025

const [button, content] = useLearnInfoBox({
	heading: "Learn info box example",
	content: (
		<LearnContent
			columns={[
				<TextContainer key={1}>
					<H3>Lorem ipsum</H3>
					<Paragraph>
						Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim
						accumsan.
					</Paragraph>
				</TextContainer>,
				<TextContainer key={2}>
					<H3>Etiam finibus</H3>
					<Paragraph>
						In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit
						voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et
						expedita distinctio.
					</Paragraph>
				</TextContainer>,
			]}
		/>
	),
});
return (
	<>
		<div style={{ display: "flex", justifyContent: "flex-end" }}>{button}</div>
		{content}
	</>
);

Open Expanded

Purpose:
- Provide detailed information upfront when space is not a constraint.
- Guide first-time users through onboarding processes.
Best Practices:
- Organize content with clear headings, bullet points, or short paragraphs.
- Include a "Close" option to collapse the box.

Lorem ipsum

Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan.

Etiam finibus

In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et expedita distinctio.

CodeHTML output

Theme: agentic-ai-2025

const [button, content] = useLearnInfoBox({
	heading: "Learn info box example",
	content: (
		<LearnContent
			columns={[
				<TextContainer key={1}>
					<H3>Lorem ipsum</H3>
					<Paragraph>
						Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim
						accumsan.
					</Paragraph>
				</TextContainer>,
				<TextContainer key={2}>
					<H3>Etiam finibus</H3>
					<Paragraph>
						In hac habitasse platea dictumst. Sed ut perspiciatis unde omnis iste natus error sit
						voluptatem accusantium doloremque laudantium. Et harum quidem rerum facilis est et
						expedita distinctio.
					</Paragraph>
				</TextContainer>,
			]}
		/>
	),
	openExpanded: true,
});
return (
	<>
		<div style={{ display: "flex", justifyContent: "flex-end" }}>{button}</div>
		{content}
	</>
);

With tabs

Purpose: Present content categorized into distinct sections.
Best Practices:
- Use clear, descriptive tab labels.
- Limit the number of tabs to 3-5.
- Ensure each tab's content is focused and relevant to its label.

Lorem ipsum

Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim accumsan.

CodeHTML output

Theme: agentic-ai-2025

const [selectedTab, setSelectedTab] = React.useState(0);
const [tabs, tabContent] = useTabSet({
	tabs: [
		{
			header: "One",
			content: (
				<LearnContent
					columns={[
						<TextContainer key={1}>
							<H3>Lorem ipsum</H3>
							<Paragraph>
								Nullam consequat ligula sit amet diam congue porttitor. Etiam finibus dignissim
								accumsan.
							</Paragraph>
						</TextContainer>,
					]}
				/>
			),
		},
		{
			header: "Two",
			content: (
				<LearnContent
					columns={[
						<TextContainer key={2}>
							<H3>Etiam finibus</H3>
							<Paragraph>In hac habitasse platea dictumst. Phasellus eu faucibus eros.</Paragraph>
						</TextContainer>,
					]}
				/>
			),
		},
		{
			header: "Three",
			content: (
				<LearnContent
					columns={[
						<TextContainer key={3}>
							<H3>Aliquam dignissim</H3>
							<Paragraph>
								Quisque fringilla metus ac enim pretium, quis sodales felis aliquet. Aenean
								bibendum ligula id porta facilisis.
							</Paragraph>
						</TextContainer>,
						<TextContainer key={4}>
							<H3>Aliquam dignissim</H3>
							<Paragraph>
								Quisque fringilla metus ac enim pretium, quis sodales felis aliquet. Aenean
								bibendum ligula id porta facilisis.
							</Paragraph>
						</TextContainer>,
					]}
				/>
			),
		},
	],
	selectedTab: selectedTab,
	onChange: setSelectedTab,
});
const [button, content] = useLearnInfoBox({
	heading: "Learn info box heading",
	tabs,
	content: tabContent,
});
return (
	<>
		<div style={{ display: "flex", justifyContent: "flex-end" }}>{button}</div>
		{content}
	</>
);

Properties

						/** Title of the learn info box*/
						header: string;
						OR
						/** Tabs for the tabset within the learn info box */
						tabs: ReactElement<TabsProps>;

						AND

						/** Content of the learn info box */
						content: ReactNode;
						/** Description of the info box */
						"aria-label"?: string;
						/** Renders the learn info box in expanded state to start with */
						openExpanded?: boolean;
						/** Callback that is called when the learn info box changes between expanded and collapsed state */
						onToggle?: (expanded: boolean) => void;
						/** Custom className that's applied to the outermost element (only intended for special cases) */
						className?: string;
						/** Style object to apply custom inline styles (only intended for special cases) */
						style?: CSSProperties;
						/** Unique string, used by external script e.g. for event tracking */
						"data-observe-key"?: string;
					

You need to preview the page's content or functionality.
You want to guide users on how to achieve their goals on the page.

Placement

LearnInfoBox is typically used in the following places:

At the top of the page, just below the main header.
Before the main content begins.

Style

Siteimprove Design System: Adhere to Siteimprove's guidelines for color, typography, and spacing. If you are not using a component from Fancy, match the styling of your LearnInfoBox to existing components for visual consistency.

Do not use when

The information is already clearly conveyed elsewhere on the page.
The content doesn't provide substantial support or guidance. Use a different component (e.g., Message , Paragraph) is more suitable.

Accessibility

For designers

Use sufficient color contrast. Make sure all interactive elements have clear labels and focus states.

For developers

This component comes with built-in accessibility, no extra work required.

Explore detailed guidelines for this component: Accessibility Specifications

Writing

Use plain language and avoid jargon
Prioritize clarity and conciseness.

Learn info box

This is a Lab component!

Examples

Default

Learn info box example

Lorem ipsum

Etiam finibus

Open Expanded

Learn info box example

Lorem ipsum

Etiam finibus

With tabs

Lorem ipsum

Properties

Guidelines

Best practices

General

Placement

Style

Do not use when

Accessibility

For designers

For developers

Writing